<template>
  <div class="home">
    <t-header></t-header>
    <div class="mainCon" ref="mainCon">
      <div class="wrapper">
        <m-swiper :swiperList="swiperList"></m-swiper>
        <icon-list :iconList="iconList"></icon-list>
        <discount :goodsList="goodsList"></discount>
      </div>
    </div>
  </div>
</template>

<script>
import tHeader from 'common/mHeader/tHeader'
import mSwiper from 'coms/Home/mSwiper'
import IconList from 'coms/Home/IconList'
import Discount from 'coms/Home/Discount'
import BScroll from 'better-scroll'
import axios from 'axios'
export default {
  name: 'Home',
  data() {
    return {
      iconList: [],
      goodsList: [],
      count: 0,
      isLoading: false,
      show: false,
      showRight: false,
      scroll: null,
      swiperList: []
    }
  },
  created() {
    this.swiperList = [
      { id: '001', imgUrl: '/images/mm1.jpg' },
      { id: '002', imgUrl: '/images/mm2.jpg' },
      { id: '003', imgUrl: '/images/mm3.jpg' },
      { id: '004', imgUrl: '/images/mm4.jpg' }
    ]
  },
  mounted() {
    this.getAllData()
  },
  methods: {
    clickLeft() {
      this.show = !this.show
    },
    clickRight() {
      // 触发搜索页面,让用户去搜索商品
      this.showRight = !this.showRight
      console.log('触发搜索页面,让用户去搜索商品')
    },
    getAllData() {
      axios.all(
        [this.$api.home.getIndexMenu(),
          this.$api.home.getMoneyCtrl()]
      ).then((infos, error) => {
        const [iconsData, goodsData] = infos
        if (iconsData.status === 200 && goodsData.status === 200) {
          this.iconList = iconsData.data.result
          this.goodsList = goodsData.data.result
          this._initScroll()
        }
      })
    },
    _initScroll() {
      this.scroll = new BScroll(this.$refs.mainCon, {
        click: true
      })
    }
  },
  components: {
    tHeader,
    IconList,
    Discount,
    mSwiper
  }

}
</script>
<style lang="stylus" scoped>
#hTopbar
  background-color #41b883
  .van-nav-bar__left
    font-size 0.48rem
    .van-icon
      color #fff
  .van-nav-bar__right
    font-size 0.48rem
    .van-icon
      color #fff
  .van-nav-bar__title
    font-size 0.48rem
    .van-icon
      color #fff
.van-popup--top
  top 0.92rem
  bottom 0
  background pink
.popCon
  background-color #2f2e3a
  width 100%
  height 100%
  color #fff
  font-size 0.8rem
  text-align center
.home
  .mainCon
    position absolute
    top 0.92rem
    left 0
    right 0
    bottom 0.8rem
    overflow hidden
</style>
